 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!DOCTYPE html>
	<html lang="en" class="no-ie" style="overflow:hidden;">
		<head>
			<meta charset="UTF-8">
			<title>近7天进场分析</title>
			<script>
				"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
					ue.interface.broadcast = function(e, t) {
						if ("string" == typeof e) {
							var o = [e, ""];
							void 0 !== t && (o[1] = t);
							var n = encodeURIComponent(JSON.stringify(o));
							"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
								"#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
								.hash = n, document.location.hash = encodeURIComponent("[]"))
						}
					}) : function(e) {
					ue.interface = {}, ue.interface.broadcast = function(t, o) {
						"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
					}
				}(ue.interface), (ue4 = ue.interface.broadcast);
			</script>
			<script src="./dist/echarts-5.3.2.min.js"></script>
			<script src="./static/js/jquery.min.js"></script>
			<script src="./static/js/FuncTest.js"></script>
			<script src="./static/js/PortChart.js"></script>
			<script>
				$(function() {
					ue4("getSize", {
						mes: "get windows size"
					});
					ue4("getColor", {
						mes: "get all color"
					});
					ue4("getData", {
						mes: "get all data"
					});
					ue4("beginSize", {
						mes: BeginSize[0],
						mes2: BeginSize[1]
					});
					ue4("beginSizeY", {
						mes: BeginSize
					});
				});
				/*$(function () {
				    
				});*/
			</script>
			<style>
				* {
					margin: 0;
					padding: 0;
				}

				@font-face {
					font-family: DIN;
					src: url(./static/font/DIN-Medium.otf);
				}
			</style>
		</head>
		<body>
			<div id="main" style=""></div>
			<script>
				let BeginSize = [400, 225];
				let myChart = null;
				let dataList = [120, 132, 101]; //国外
				let dataList1 = [220, 182, 191]; //中国
				let titleData = ['2017', '2019', '2021'];
				let titleData1 = ['国外', '中国'];

				function fresh() {
					if (myChart==null) {
						myChart = echarts.init(document.getElementById('main'));  //利用原型调取Echarts的初始化方法
					}
					let option = {
						backgroundColor: "#031026",
						title: {
							text: "单位：亿(美元)",
							left: "7%",
							top: "4%",
							textStyle: {
								fontSize: 15,
								color: "#99c8ff",
								fontFamily: 'SourceHanSansCN'
							}
						},
						tooltip: {
							trigger: 'axis',
							backgroundColor: "#031026",
							borderColor: "#031026",

							axisPointer: {
								type: 'none',
							},
							formatter: function(params) {
								var str =
									`<h2 style=font-size:14px;>${params[0].name}</h2>
								<span style=font-size:14px>${params[0].seriesName}</span><span style=color:#2E9EFF;font-size:14px;padding-left:20px;>${params[0] ? params[0].data : ''}亿</span><br />
								<span style=font-size:14px>${params[1].seriesName}</span><span style=color:#00DCFF;font-size:14px;padding-left:20px;>${params[1] ? params[1].data : ''}亿</span>`
								return str

							},
						},
						legend: {
							top: '2%',
							right: '2%',
							icon: "rect",
							itemHeight: 12,
							itemWidth: 12,
							textStyle: {
								color: "#DFF8FF ",
								fontSize: 15,
							},
							data: titleData1
						},
						grid: {
							left: '8%',
							right: '4%',
							height: '75%',
							width: '88%',
							bottom: '5%',
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							boundaryGap: true,
							data: titleData,
							axisLine: {
								show: true,
								lineStyle: {
									color: "#B1B1B1",
								},
							},
							axisLabel: {
								textStyle: {
									color: "#DFF8FF",
									fontSize: 17
								},
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
						}, {
							type: 'category',
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							splitArea: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							data: titleData,
						}],
						yAxis: {
							type: 'value',
							axisLine: {
								show: true,
								lineStyle: {
									color: "#B1B1B1",
								},
							},
							axisLabel: {
								textStyle: {
									color: "#B1B1B1",
									fontSize: 15
								},
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "#556468",
									type:'dashed'
								},
							},
						},
						series: [{
								name: '国外',
								type: 'bar',
								data: dataList,
								barCategoryGap: 10,
								barWidth: 12,
								xAxisIndex: 0,
								showBackground: true,
								backgroundStyle: {
									color: 'rgba(12, 57, 96, 0.8)'
								},
								itemStyle: {
									normal: {
										barBorderRadius: [3, 3, 0, 0],
										color: 'rgba(67, 168, 255, 1)',
									},
								},
								z: 3,
							},
							// {
							// 	name: '国外',
							// 	type: 'bar',
							// 	xAxisIndex: 1,
							// 	data: [300, 300, 300],
							// 	barWidth: 12,
							// 	itemStyle: {
							// 		normal: {
							// 			barBorderRadius: [3, 3, 0, 0],
							// 			color: 'rgba(12, 57, 96, 0.8)',
							// 		},
							// 	},
							// 	z: 1,
							// },
							{
								name: '中国',
								type: 'bar',
								data: dataList1,
								barCategoryGap: 10,
								xAxisIndex: 0,
								barWidth: 12,
								showBackground: true,
								backgroundStyle: {
									color: 'rgba(12, 57, 96, 0.8)'
								},
								itemStyle: {
									normal: {
										barBorderRadius: [3, 3, 0, 0],
										color: 'rgba(0, 220, 255, 1)',
									},
								},
								z: 3,
							},
							// {
							// 	name: '中国',
							// 	type: 'bar',
							// 	xAxisIndex: 1,
							// 	data: [300, 300, 300],
							// 	barWidth: 12,
							// 	itemStyle: {
							// 		normal: {
							// 			barBorderRadius: [3, 3, 0, 0],
							// 			color: 'rgba(12, 57, 96, 0.8)',
							// 		},
							// 	},
							// 	z: 1,
							// }
						]
					};
					myChart.setOption(option);
				}
				// bind();
				fresh();


				//浏览器测试用
				change(BeginSize[0], BeginSize[1]);


				function change(x, y) {
					let div = document.getElementById("main");
					//alert("I am an alert box!!");
					div.style.width = x + "px";
					div.style.height = y + "px";
					var myOption = myChart.getOption();
					myChart.resize();
					let types = []
					myOption.series.forEach((item) => {
						types.push(item.type)
					})
					return types
				}


				/************下面数据***********/
				ue.interface.TransList = function(data) {
					var obj = JSON.parse(data);
					titleData = obj.data1;
					titleData1 = obj.data2;
					dataList = obj.data3;
					dataList1 = obj.data4;
					fresh();
				};
				
			</script>
		</body>
	</html>

	<body>
	</body>
</html>
